<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .input{position: relative;border: solid 1px black;width: 200px;height:20px;}
    .input input{position: absolute;left:0;z-index: 1;background: none;height: 20px;border: none;padding: 0;width:200px}
    .input span{position: absolute;left:3px;color: #aaa;font-size: 12px;line-height: 20px;height: 20px;}
  </style>
</head>
<body>
  <input type="text" placeholder="默认提示">

  <div class="input">
    <input type="text">
    <span>默认提示</span>
  </div>
</body>
<script>

  // 使用html+css+js，模拟input的placeholder的功能
  var ipt = document.querySelector(".input input")
  var tip = document.querySelector(".input span")

  // 输入框的输入事件
  ipt.oninput = function(){
    // 判断输入框是否为空
    if(ipt.value === ""){
      // 为空，显示提示
      tip.style.display = "block"
    }else{
      // 不为空，隐藏提示
      tip.style.display = "none"
    }
  }

  
</script>
</html>